<template>
  <el-form ref="formRef" :model="model" :rules="rules" v-bind="$attrs">
    <el-row :gutter="gutter">
      <el-col v-for="field in fields" :key="field.prop" :span="field.span || 24">
        <el-form-item :label="field.label" :prop="field.prop">
          <!-- 输入框 -->
          <el-input
            v-if="field.type === 'input'"
            v-model="model[field.prop]"
            :placeholder="field.placeholder"
            :disabled="field.disabled"
            v-bind="field.attrs"
          />

          <!-- 文本域 -->
          <el-input
            v-else-if="field.type === 'textarea'"
            v-model="model[field.prop]"
            type="textarea"
            :placeholder="field.placeholder"
            :disabled="field.disabled"
            :rows="field.rows || 3"
            v-bind="field.attrs"
          />

          <!-- 数字输入框 -->
          <el-input-number
            v-else-if="field.type === 'number'"
            v-model="model[field.prop]"
            :min="field.min"
            :max="field.max"
            :disabled="field.disabled"
            v-bind="field.attrs"
          />

          <!-- 选择框 -->
          <el-select
            v-else-if="field.type === 'select'"
            v-model="model[field.prop]"
            :placeholder="field.placeholder"
            :disabled="field.disabled"
            v-bind="field.attrs"
          >
            <el-option
              v-for="option in field.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <!-- 单选框组 -->
          <el-radio-group
            v-else-if="field.type === 'radio'"
            v-model="model[field.prop]"
            :disabled="field.disabled"
            v-bind="field.attrs"
          >
            <el-radio v-for="option in field.options" :key="option.value" :label="option.value">
              {{ option.label }}
            </el-radio>
          </el-radio-group>

          <!-- 复选框组 -->
          <el-checkbox-group
            v-else-if="field.type === 'checkbox'"
            v-model="model[field.prop]"
            :disabled="field.disabled"
            v-bind="field.attrs"
          >
            <el-checkbox v-for="option in field.options" :key="option.value" :label="option.value">
              {{ option.label }}
            </el-checkbox>
          </el-checkbox-group>

          <!-- 开关 -->
          <el-switch
            v-else-if="field.type === 'switch'"
            v-model="model[field.prop]"
            :disabled="field.disabled"
            v-bind="field.attrs"
          />

          <!-- 自定义插槽 -->
          <slot
            v-else-if="field.type === 'slot'"
            :name="field.slot"
            :model="model"
            :field="field"
          />

          <!-- 默认输入框 -->
          <el-input
            v-else
            v-model="model[field.prop]"
            :placeholder="field.placeholder"
            :disabled="field.disabled"
            v-bind="field.attrs"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 自定义字段插槽 -->
    <slot name="custom-fields" :model="model"></slot>

    <el-form-item v-if="showActions">
      <slot name="actions">
        <el-button type="primary" @click="submitForm">{{ submitText }}</el-button>
        <el-button @click="resetForm">{{ resetText }}</el-button>
      </slot>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'

// 类型定义
type FieldType = 'input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'date' | 'number' | 'email' | 'switch' | 'slot'

// 表单字段配置
interface Field {
  type: FieldType
  prop: string
  label: string
  placeholder?: string
  disabled?: boolean
  span?: number
  rows?: number
  min?: number
  max?: number
  options?: { label: string; value: any }[]
  slot?: string
  attrs?: Record<string, any>
  // 兼容性：支持key别名
  key?: string
  required?: boolean
  validation?: any
}

// 表单配置
interface BaseFormProps {
  fields: Field[]
  model: Record<string, any>
  rules?: Record<string, any>
  gutter?: number
  showActions?: boolean
  submitText?: string
  resetText?: string
  labelWidth?: string
  labelPosition?: 'left' | 'right' | 'top'
}

const props = withDefaults(defineProps<BaseFormProps>(), {
  rules: () => ({}),
  gutter: 20,
  showActions: true,
  submitText: '提交',
  resetText: '重置',
})

const formRef = ref<FormInstance>()

const submitForm = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!!')
    }
  })
}

const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
